<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <link rel="stylesheet" href="__PUBLIC__/HomeCss/login.css" type="text/css">
    <script src="__PUBLIC__/Js/jquery.js"></script>
</head>
<body>
    <div class="title">
        <a href="<{:U('Home/Index/index')}>"><img src="__PUBLIC__/Photo/Home/Cart/logo.png" alt="logo" title='logo' class="logo"></a>
        <span class="status2"><a href="<{:U('Home/User/login')}>">登录</a>&nbsp;|&nbsp;<a href="<{:U('Home/User/register')}>">注册</a></span>
    </div>
    <div class="body">
    <br>
        <form action="<{:U('doLogin')}>" method="post" id="frm">
        <table align='center'  width="350px" >
            <tr>
                <th width="80px">用户名</th>
                <td><input type="text" name='uname'><br><span id="checkname1" class='state1'>请输入用户名</span></td>
            </tr>
            <tr>
                <th>密&nbsp;码</th>
                <td><input type="password" name='pwd'><br><span id="checkpwd1" class='state1'>请输入密码</span></td>
            </tr>
            <tr>
                <th>验证码</th>
                <td><input type='text' name='code' id="code">
                    <img onclick="this.src='<{:U('/Home/User/verify')}>?'+Math.random()" src="<{:U('/Home/User/verify')}>">  <br> 
                    <span id="checkcode1" class='state1'>请输入验证码</span>      
                </td>
            </tr>
            <tr style="height:80px;">
                <td colspan=2 align="center"><input type='button' class='submit' value='登录'></td>
            </tr>
        </table>
        </form>
    </div>  





<script>
    $(function(){
        var ok1=false;
        var ok2=false;
        var ok3=false;
        // 验证用户名
        $('input[name="uname"]').focus(function(){
            $('#checkname1').text('用户名应该为3-12位之间').removeClass().addClass('state2');
        }).blur(function(){
            if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){
                // 验证用户名存在
                var uname = $(this).val();
                $.get('<{:U("checkName")}>',{uname:uname},function(data){ 
                    if(data.status==true){                       
                        $('#checkname1').text('用户名不存在!').removeClass().addClass('state3');
                        return;
                    }else{
                        $('#checkname1').text('输入成功').removeClass().addClass('state4');
                        ok1=true;                
                    }
               },'json');
            }else{
                $('#checkname1').text('用户名应该为3-12位之间').removeClass().addClass('state3');
            }
        });                     


        //验证密码
        $('input[name="pwd"]').focus(function(){
            $('#checkpwd1').text('密码应该为6-20位之间').removeClass().addClass('state2');
        }).blur(function(){
            if($(this).val().length >=6 && $(this).val().length <=20 && $(this).val()!=''){
                var uname = $('input[name="uname"]').val();
                var pwd = $(this).val();
                $.get('<{:U("checkpwd")}>',{uname:uname,pwd:pwd},function(data){ 
                    if(data.status==false){                       
                        $('#checkpwd1').text(data.msg).removeClass().addClass('state3');
                        return;
                    }else{
                        $('#checkpwd1').text('输入成功').removeClass().addClass('state4');
                        ok2=true;                
                    }
               },'json');                
            }else{
                $('#checkpwd1').text('密码应该为6-20位之间').removeClass().addClass('state3');
            }
             
        });

         //验证验证码
        $('input[name="code"]').focus(function(){
            $('#checkcode1').text('请输入验证码').removeClass().addClass('state2');
        }).blur(function(){
            if($('input[name="code"]').val().length==4){
                var code = $(this).val();
                $.get('<{:U("checkcode")}>',{code:code},function(data){ 
                        if(data.status==false){                       
                            $('#checkcode1').text(data.msg).removeClass().addClass('state3');
                            return;
                        }else{
                            $('#checkcode1').text('验证成功').removeClass().addClass('state4');
                            ok3=true;                
                        }
                   },'json'); 
            }else{
                $('#checkcode1').text('请输入验证码').removeClass().addClass('state3');
            }
        });
        //提交按钮,所有验证通过方可提交
        $('.submit').click(function(){
            if(ok1 && ok2 && ok3){
                $('#frm').submit();
            }else{
                alert("请填写完整信息");
                return false;
            }
        }); 
    });
</script>
</body>
</html>